<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
      <table class="table" id="up">
          <tr>
              <td>名称</td>
              <td><input v-model="food.name"></td>
          </tr>
          <tr>
              <td>图片</td>
              <td><input type="file" @change="getfile($event)"><br><img id="oldimg" :src="'images/'+food.pic" width="100"><span id="img"></span></td>
          </tr>
          <tr>
              <td colspan="2">
                  <button type="button" class="btn btn-primary" @click="update()">修改</button>
              </td>
          </tr>
      </table>
</body>
<script>
    var a= new Vue({
        el:'#up',
        data:{
            food:'',
            files:'',
        },
        methods:{
            //选中图片的事件
            getfile(event){
                $("#oldimg").remove();
                this.files=event.target.files;
                //  获得上传的文件数组的第一个
                var file=this.files[0]
                //  实例化
                var reader=new FileReader();
                // 设置回调
                reader.onload=function(e){
                    //创建一个图片对象
                    let images=$("<img src='' width='80' />");
                    //给图片对象赋值
                    images.attr("src",e.target.result);
                    //放到span标签里面
                    $("#img").html(images);
                }
                // 加载图片
                reader.readAsDataURL(file);


            },


            update() {
                //html任意出现 null 会自动加上  'null' //就会变成字符串的空
                let fdate=new FormData();  //包含文件的数据对象
                if(this.files!=''){
                    fdate.append("files",this.files[0]); //  addfood?file=xxx&name=刘德华
                }
                for(let f in this.food){
                    if(this.food[f]!=null&&this.food[f]!='') {
                        fdate.append(f, this.food[f]);// <input name='属性名称f' value="属性的值[f]"
                    }
                }


                $.ajax({
                        url: "updatefood",
                        type: 'POST',
                        cache: false,
                        data: fdate,
                        processData: false,   //文件上传
                        contentType: false,
                        dataType:"json", //回调类型
                        beforeSend: function(){
                            //上传之前你想干嘛
                        },
                        success : function(json) {
                            if(json.code==200) {
                                location="index.html"
                            }else{
                                //什么提示
                                alert("错误");
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            //上传异常给一个什么意思
                            alert("错误2");
                        },
                });
            }
        },
        created(){
            var id = sessionStorage.getItem("id");
            $.getJSON("updatebyid/"+id,function (json) {
                a.food=json.data.food;
            });
        },
    });
</script>
</html>